<template>
  <div>
    <!-- 分界线-->
    <el-divider>
      <span style=" font-size: 25px; font-weight: bold;color: #67C23A;">车票预订</span>
    </el-divider>
    <el-radio v-model="radio" label="1" style="margin-right: 720px;"
      >单程</el-radio
    >

    <!-- 表单部分 -->
    <el-form class="actions" :inline="true" :model="filter">
      <el-form-item label="出发地">
        <el-cascader
          size="small"
          style="width: 130px;"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
          :show-all-levels="false"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="目的地">
        <el-cascader
          size="small"
          style="width: 130px;"
          :options="options"
          v-model="selectedOptions2"
          @change="handleChange2"
          :show-all-levels="false"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item> </el-form-item>

      <el-form-item label="动车类型">
        <el-select
          v-model="filter.type"
          size="small"
          style="width: 110px;"
          @change="filterquery"
        >
          <el-option
            v-for="item in typeCar"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="filterquery"
          size="small"
          type="primary"
          icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          @click="ReForm"
          size="small"
          type="info"
          class="el-icon-delete"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 购票介绍表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="动车信息" width="620">
        <template slot-scope="scope">
         <p style="width: 60%;display: flex;justify-content: space-between;margin: 10px 0;">
          <span style="font-size: 23px; font-weight: bold; color:dodgerblue;">{{
            scope.row.timeRange
          }}</span>
          <span
            style="font-size: 10px; font-weight: bold; color:grey; "
            ><i class="el-icon-date"></i> {{ scope.row.needTime }}</span>
          <span
            style="font-size: 23px; font-weight: bold; color:dodgerblue;"
            >{{ scope.row.timeEnd }}</span>
         </p>
          <p style="width: 60%;display: flex;justify-content: space-between;">
            <span style="font-size: 17px; font-weight: bold; color:black;">{{
            scope.row.startPlace
          }}</span>
          <span
            style="font-size: 10px; font-weight: bold; color:grey;"
            ><i class="el-icon-truck"></i> {{ scope.row.trainNumber }}</span
          >
          <span
            style="font-size: 17px; font-weight: bold; color:black;"
            >{{ scope.row.endPlace }}</span>
          </p>
        </template>
      </el-table-column>

      <el-table-column label="">
        <template slot-scope="scope">
          <!-- 写span标签接收价格数据并拼接信息-->

          <span
            style="
           font-weight: bold; color: red;
          font-size: 20px; margin-right: 10px; "
            >￥{{ scope.row.price }}</span
          >
          <!-- 设置“查看详情的按钮”-->
          <el-button
            size="medium"
            type="success"
            @click="carDetail(scope.row.id)"
            >订票</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import newAxios from "../../utils/axios";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  name: "hotel",

  data() {
    return {
      imgs: [
        require("../../assets/images/sceintSpot/1.jpg"),
        require("../../assets/images/sceintSpot/2.jpg"),
        require("../../assets/images/sceintSpot/3.jpg"),
        require("../../assets/images/sceintSpot/6.jpg"),
      ],
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
      filter: {},
      radio: "1",
      startCit: "",
      endCity: "",
      startTime: "",
      typeCar: [
        {
          value: 0,
          label: "火车",
        },
        {
          value: 1,
          label: "高铁",
        },
      ],
      options: provinceAndCityDataPlus,
      selectedOptions: [],
      startPlace: "",
      options2: provinceAndCityDataPlus,
      selectedOptions2: [],
      endPlace: "",
    };
  },
  created() {
    //获取列表数据
    this.loadCar();
  },
  methods: {
    //详情页跳转的方法
    carDetail(id) {
      this.$router.push({
        path: "/carDetail",
        query: {
          car_id: id,
        },
      });
    },

    handleChange() {
      var loc = "";
      for (let i = 1; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      console.log(loc); //打印区域码所对应的属性值即中文地址
      this.startPlace = loc;
      this.loadCar();
    },
    handleChange2() {
      var loc = "";
      for (let i = 1; i < this.selectedOptions2.length; i++) {
        loc += CodeToText[this.selectedOptions2[i]];
      }
      console.log(loc); //打印区域码所对应的属性值即中文地址
      this.endPlace = loc;
      this.loadCar();
    },

    //获取酒店的数据列表以及分页信息
    loadCar() {
      this.startPlace = this.startPlace.replace("市", "");
      this.endPlace = this.endPlace.replace("市","");
      newAxios
        .post("/car/listPage", {
          currentPage: this.pageNum,
          pageSize: this.pageSize,
          // startPlace: this.filter.startPlace,
          startPlace: this.startPlace,
          endPlace: this.endPlace,
          //endPlace: this.filter.endPlace,
          type: this.filter.type,
          state: 1,
        })
        .then((res) => res.data)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.total;
          } else {
            // alert("获取数据失败");
          }
        });
    },
    //条件分页查询
    filterquery() {
      this.loadCar();
    },
    //重置查询
    ReForm() {
      this.filter.type = null;
      this.endPlace = "";
      this.startPlace = "";
      this.selectedOptions = "";

      this.selectedOptions2 = "";

      this.loadCar();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1;
      this.pageSize = val;
      this.loadCar();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.loadCar();
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
p.groove {
  border-style: hidden;
  height: 60px;
  background-color: rgb(242, 238, 238);
  width: 380px;
  border-radius: 5px;
}
p.right {
  border-style: hidden;
  height: 60px;
  background-color: rgb(242, 238, 238);
  width: 380px;
  margin-left: 6px;
  border-radius: 5px;
}
.car {
  display: flex;
}
</style>
